import React, { useEffect, useState } from "react";
// import * as echarts from "echarts";
import { Map, MapvglView, MapvglLayer, Polyline, Marker, Label, Arc } from 'react-bmapgl'
import styleJson1 from './custom_map_config (1).json'
import './index.scss'
export default function Qujing() {
  let [position, setposition] = useState(new window.BMapGL.Point(108.935254, 34.405189),)//西安 长安
  let [icon, seticon] = useState('simple_blue')
  const settings = JSON.parse(localStorage.getItem("settings")) || {};
  const [styles, setstyles] = useState(settings.colorData);
  const [colors, setcolors] = useState(settings.colors);

  return (
    < Map
      zoom={4}
      mapStyleV2={{ styleJson: styleJson1 }}
      mapType='earth'
      enableScrollWheelZoom
      enableRotate
      center={new window.BMapGL.Point(116.404449, 39.914889)}
    >

      <MapvglView effects={['bright']}>
        <MapvglLayer
          type="PointLayer"
          // data={point}
          options={{
            blend: 'lighter',
            size: 6,
            color: 'rgb(255, 53, 0, 0.6)',

          }}

        />
      </MapvglView>

      {/* 麦哲伦 */}
      <div>
        <Polyline
          path={[

            new window.BMapGL.Point(-188.928313, -2.850126),//13
            new window.BMapGL.Point(-198.928313, 5.850126),//14
            new window.BMapGL.Point(-205.928313, 7.850126),//15
            new window.BMapGL.Point(145.209632, 14.164687),//马里亚纳群岛
            new window.BMapGL.Point(137.928313, 12.850126),//16
            new window.BMapGL.Point(129.928313, 11.850126),//17
            new window.BMapGL.Point(125.638948, 11.243016),//萨玛1'
            new window.BMapGL.Point(125.852730, 10.903617),//萨玛2
            new window.BMapGL.Point(125.686260, 10.826970),//霍蒙洪岛
            new window.BMapGL.Point(125.347643, 9.809548),//菲律宾群岛辅助点
            new window.BMapGL.Point(125.064417, 9.961198),//利马萨瓦
            new window.BMapGL.Point(123.803228, 10.235243),//宿雾岛
            new window.BMapGL.Point(123.980188, 10.332247),//麦克坦
            new window.BMapGL.Point(118.634276, 9.435080),//巴拉望
            new window.BMapGL.Point(127.390863, 0.697616),//蒂多雷
            new window.BMapGL.Point(128.096533, -3.527012),//安汶岛
            new window.BMapGL.Point(124.179756, -9.236652),//帝汶
            new window.BMapGL.Point(109.726788, -15.147889),//印度洋辅助点1
            new window.BMapGL.Point(99.726788, -18.047889),//2
            new window.BMapGL.Point(85.726788, -23.147889),//3
            new window.BMapGL.Point(76.726788, -29.147889),//4
            new window.BMapGL.Point(66.726788, -35.147889),//5
            new window.BMapGL.Point(56.726788, -39.147889),//6
            new window.BMapGL.Point(43.726788, -39.147889),//7
            new window.BMapGL.Point(39.726788, -39.947889),//7
            new window.BMapGL.Point(29.726788, -40.147889),//8
            new window.BMapGL.Point(18.473927, -34.356817),//好望角
            new window.BMapGL.Point(9.384907, -27.079606),//大西洋返回辅助点1
            new window.BMapGL.Point(2.778027, -19.928112),//2
            new window.BMapGL.Point(-2.945186, -12.617718),//3
            new window.BMapGL.Point(-12.135627, -6.616552),//4
            new window.BMapGL.Point(-20.135627, 0.616552),//5
            new window.BMapGL.Point(-23.135627, 8.616552),//6
            new window.BMapGL.Point(-24.135627, 15.616552),//7
            new window.BMapGL.Point(-20.135627, 26.616552),//8
            new window.BMapGL.Point(-14.135627, 32.616552),//9
            new window.BMapGL.Point(-5.984412, 37.389825),//'塞维利亚

          ]}
          strokeColor={styles[colors][2]}
          strokeWeight={3}
        />

        <Polyline
          path={[
            new window.BMapGL.Point(-5.984412, 37.389825),
            new window.BMapGL.Point(-6.352948, 36.773200),//桑卢卡尔－德巴拉梅达
            new window.BMapGL.Point(-15.501880, 28.004794),//加纳利群岛 
            new window.BMapGL.Point(-20.135627, 14.616552),//大西洋辅助点1'
            new window.BMapGL.Point(-22.429777, 4.321913),//2
            new window.BMapGL.Point(-31.435243, -6.038134),//3
            new window.BMapGL.Point(-36.541832, -12.595625),//4
            new window.BMapGL.Point(-38.254773, -20.750359),//5
            new window.BMapGL.Point(-43.169265, -22.908516),//里约热内卢
            new window.BMapGL.Point(-47.892756, -27.399968),//6
            new window.BMapGL.Point(-50.978379, -32.087062),//7
            new window.BMapGL.Point(-56.746412, -35.179830),//拉普拉塔河
            new window.BMapGL.Point(-67.714665, -49.312443),//圣胡利安湾
            new window.BMapGL.Point(-68.524543, -52.475863),//维尔赫纳斯角
            new window.BMapGL.Point(-70.725699, -53.540607),//麦哲伦海峡
            new window.BMapGL.Point(-70.725699, -53.540607),//希望角
            new window.BMapGL.Point(-78.328160, -42.895632),//太平洋辅助点1'
            new window.BMapGL.Point(-80.470603, -32.746314),//太平洋辅助点2
            new window.BMapGL.Point(-85.027722, -31.273247),//3
            new window.BMapGL.Point(-91.244359, -28.402350),//4
            new window.BMapGL.Point(-98.665583, -24.404688),//5
            new window.BMapGL.Point(-113.188808, -23.483444),//6
            new window.BMapGL.Point(-125.387639, -21.746314),//7
            new window.BMapGL.Point(-133.928313, -17.850126),//8
            new window.BMapGL.Point(-145.928313, -15.850126),//9
            new window.BMapGL.Point(-138.819320, -14.829683),//普卡普卡岛
            new window.BMapGL.Point(-151.8, -11.1),//弗林特岛
            new window.BMapGL.Point(-160.928313, -9.850126),//10
            new window.BMapGL.Point(-168.928313, -8.850126),//11
            new window.BMapGL.Point(-178.928313, -5.850126),//12


          ]}
          strokeColor={styles[colors][2]}
          strokeWeight={3}
        />

        {/* 散点 */}
        <div>
          <Marker position={new window.BMapGL.Point(-5.984412, 37.389825)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-5.984412, 37.389825)} text='塞维利亚' />

          <Marker position={new window.BMapGL.Point(-6.352948, 36.773200)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-6.352948, 36.773200)} text='桑卢卡尔－德巴拉梅达' />

          <Marker position={new window.BMapGL.Point(-15.501880, 28.004794)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-15.501880, 28.004794)} text='加纳利群岛' />
          <Marker position={new window.BMapGL.Point(-20.135627, 14.616552)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-20.135627, 14.616552)} text='大西洋辅助点1' />
          <Marker position={new window.BMapGL.Point(-22.429777, 4.321913)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-22.429777, 4.321913)} text='大西洋辅助点2' />
          <Marker position={new window.BMapGL.Point(-31.435243, -6.038134)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-31.435243, -6.038134)} text='大西洋辅助点3' />
          <Marker position={new window.BMapGL.Point(-36.541832, -12.595625)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-36.541832, -12.595625)} text='大西洋辅助点4' />
          <Marker position={new window.BMapGL.Point(-38.254773, -20.750359)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-38.254773, -20.750359)} text='大西洋辅助点5' />

          <Marker position={new window.BMapGL.Point(-43.169265, -22.908516)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-43.169265, -22.908516)} text='里约热内卢' />

          <Marker position={new window.BMapGL.Point(-47.892756, -27.399968)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-47.892756, -27.399968)} text='大西洋辅助点6' />

          <Marker position={new window.BMapGL.Point(-50.978379, -32.087062)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-50.978379, -32.087062)} text='大西洋辅助点7' />

          <Marker position={new window.BMapGL.Point(-56.746412, -35.179830)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-56.746412, -35.179830)} text='拉普拉塔河' />

          <Marker position={new window.BMapGL.Point(-67.714665, -49.312443)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-67.714665, -49.312443)} text='圣胡利安湾' />

          <Marker position={new window.BMapGL.Point(-68.524543, -52.475863)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-68.524543, -52.475863)} text='维尔赫纳斯角' />

          <Marker position={new window.BMapGL.Point(-70.725699, -53.540607)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-70.725699, -53.540607)} text='麦哲伦海峡' />

          <Marker position={new window.BMapGL.Point(-70.725699, -53.540607)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-70.725699, -53.540607)} text='希望角' />

          <Marker position={new window.BMapGL.Point(-78.328160, -42.895632)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-78.328160, -42.895632)} text='太平洋辅助点1' />

          <Marker position={new window.BMapGL.Point(-80.470603, -32.746314)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-80.470603, -32.746314)} text='太平洋辅助点2' />

          <Marker position={new window.BMapGL.Point(-85.027722, -31.273247)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-85.027722, -31.273247)} text='太平洋辅助点3' />

          <Marker position={new window.BMapGL.Point(-91.244359, -28.402350)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-91.244359, -28.402350)} text='太平洋辅助点4' />

          <Marker position={new window.BMapGL.Point(-98.665583, -24.404688)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-98.665583, -24.404688)} text='太平洋辅助点5' />

          <Marker position={new window.BMapGL.Point(-113.188808, -23.483444)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-113.188808, -23.483444)} text='太平洋辅助点6' />

          <Marker position={new window.BMapGL.Point(-125.387639, -21.746314)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-125.387639, -21.746314)} text='太平洋辅助点7' />

          <Marker position={new window.BMapGL.Point(-133.928313, -17.850126)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-133.928313, -17.850126)} text='太平洋辅助点8' />

          <Marker position={new window.BMapGL.Point(-145.928313, -15.850126)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-145.928313, -15.850126)} text='太平洋辅助点9' />

          <Marker position={new window.BMapGL.Point(-138.819320, -14.829683)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-138.819320, -14.829683)} text='普卡普卡岛' />

          <Marker position={new window.BMapGL.Point(-151.8, -11.1)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-151.8, -11.1)} text='弗林特岛' />

          <Marker position={new window.BMapGL.Point(-160.928313, -9.850126)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-160.928313, -9.850126)} text='太平洋辅助点10' />

          <Marker position={new window.BMapGL.Point(-168.928313, -8.850126)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-168.928313, -8.850126)} text='太平洋辅助点11' />

          <Marker position={new window.BMapGL.Point(-178.928313, -5.850126)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-178.928313, -5.850126)} text='太平洋辅助点12' />

          <Marker position={new window.BMapGL.Point(-188.928313, -2.850126)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-188.928313, -2.850126)} text='太平洋辅助点13' />

          <Marker position={new window.BMapGL.Point(-198.928313, 5.850126)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-198.928313, 5.850126)} text='太平洋辅助点14' />

          <Marker position={new window.BMapGL.Point(-205.928313, 7.850126)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-205.928313, 7.850126)} text='太平洋辅助点15' />

          <Marker position={new window.BMapGL.Point(145.209632, 14.164687)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(145.209632, 14.164687)} text='马里亚纳群岛' />

          <Marker position={new window.BMapGL.Point(137.928313, 12.850126)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(137.928313, 12.850126)} text='太平洋辅助点16' />

          <Marker position={new window.BMapGL.Point(129.928313, 11.850126)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(129.928313, 11.850126)} text='太平洋辅助点17' />

          <Marker position={new window.BMapGL.Point(125.638948, 11.243016)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(125.638948, 11.243016)} text='萨玛1' />

          <Marker position={new window.BMapGL.Point(125.852730, 10.903617)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(125.852730, 10.903617)} text='萨玛2' />

          <Marker position={new window.BMapGL.Point(125.686260, 10.826970)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(125.686260, 10.826970)} text='霍蒙洪岛' />

          <Marker position={new window.BMapGL.Point(125.347643, 9.809548)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(125.347643, 9.809548)} text='菲律宾群岛辅助点' />

          <Marker position={new window.BMapGL.Point(125.064417, 9.961198)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(125.064417, 9.961198)} text='利马萨瓦' />

          <Marker position={new window.BMapGL.Point(123.803228, 10.235243)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(123.803228, 10.235243)} text='宿雾岛' />

          <Marker position={new window.BMapGL.Point(123.980188, 10.332247)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(123.980188, 10.332247)} text='麦克坦' />

          <Marker position={new window.BMapGL.Point(118.634276, 9.435080)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(118.634276, 9.435080)} text='巴拉望' />

          <Marker position={new window.BMapGL.Point(127.390863, 0.697616)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(127.390863, 0.697616)} text='蒂多雷' />

          <Marker position={new window.BMapGL.Point(128.096533, -3.527012)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(128.096533, -3.527012)} text='安汶岛' />

          <Marker position={new window.BMapGL.Point(124.179756, -9.236652)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(124.179756, -9.236652)} text='帝汶' />

          <Marker position={new window.BMapGL.Point(109.726788, -15.147889)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(109.726788, -15.147889)} text='印度洋辅助点1' />

          <Marker position={new window.BMapGL.Point(99.726788, -18.047889)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(99.726788, -18.047889)} text='印度洋辅助点2' />

          <Marker position={new window.BMapGL.Point(85.726788, -23.147889)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(85.726788, -23.147889)} text='印度洋辅助点3' />

          <Marker position={new window.BMapGL.Point(76.726788, -29.147889)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(76.726788, -29.147889)} text='印度洋辅助点4' />

          <Marker position={new window.BMapGL.Point(66.726788, -35.147889)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(66.726788, -35.147889)} text='印度洋辅助点5' />

          <Marker position={new window.BMapGL.Point(56.726788, -39.147889)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(56.726788, -39.147889)} text='印度洋辅助点6' />

          <Marker position={new window.BMapGL.Point(43.726788, -39.147889)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(43.726788, -39.147889)} text='印度洋辅助点7' />

          <Marker position={new window.BMapGL.Point(29.726788, -40.147889)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(29.726788, -40.147889)} text='印度洋辅助点8' />

          <Marker position={new window.BMapGL.Point(18.473927, -34.356817)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(18.473927, -34.356817)} text='好望角' />

          <Marker position={new window.BMapGL.Point(9.384907, -27.079606)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(9.384907, -27.079606)} text='大西洋返回辅助点1' />

          <Marker position={new window.BMapGL.Point(2.778027, -19.928112)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(2.778027, -19.928112)} text='大西洋返回辅助点2' />

          <Marker position={new window.BMapGL.Point(-2.945186, -12.617718)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-2.945186, -12.617718)} text='大西洋返回辅助点3' />

          <Marker position={new window.BMapGL.Point(-12.135627, -6.616552)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-12.135627, -6.616552)} text='大西洋返回辅助点4' />

          <Marker position={new window.BMapGL.Point(-20.135627, 0.616552)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-20.135627, 0.616552)} text='大西洋返回辅助点5' />

          <Marker position={new window.BMapGL.Point(-23.135627, 8.616552)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-23.135627, 8.616552)} text='大西洋返回辅助点6' />

          <Marker position={new window.BMapGL.Point(-24.135627, 15.616552)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-24.135627, 15.616552)} text='大西洋返回辅助点7' />

          <Marker position={new window.BMapGL.Point(-20.135627, 26.616552)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-20.135627, 26.616552)} text='大西洋返回辅助点8' />

          <Marker position={new window.BMapGL.Point(-14.135627, 32.616552)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-14.135627, 32.616552)} text='大西洋返回辅助点9' />

          <Marker position={new window.BMapGL.Point(-5.984412, 37.389825)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][2] }} position={new window.BMapGL.Point(-5.984412, 37.389825)} text='塞维利亚' />

        </div>
      </div>


      <div>
        {/* 取经路径图 */}
        <Polyline
          path={[
            new window.BMapGL.Point(108.935254, 34.405189),//西安 长安
            new window.BMapGL.Point(103.836787, 36.078204),//兰州
            new window.BMapGL.Point(102.644554, 37.934378), // 威武 凉州
            new window.BMapGL.Point(96.349897, 40.55498), //name: '双塔水库', oldName: '唐代玉门关
            new window.BMapGL.Point(93.51575, 42.835347), //{name: '哈密', oldName: '伊吾'},
            new window.BMapGL.Point(90.221529, 42.893574), //ame: '鄯善', oldName: '白力城'},
            new window.BMapGL.Point(89.202761, 42.955506), //{name: '吐鲁番', oldName: '高昌王城'},
            new window.BMapGL.Point(86.576619, 42.069454), //{name: '焉耆', oldName: '阿耆尼'},
            new window.BMapGL.Point(80.250095, 41.188412), //{name: '阿克苏', oldName: '跋禄迦国'},,
            new window.BMapGL.Point(75.292596, 42.924894), //name: '托克马克',oldName: '碎叶'remark: '今吉尔吉斯之托克马克西南八公里处，,,
            new window.BMapGL.Point(67.023766, 39.874394), // {name: '撒马尔罕', oldName: '飒秣建国',
            new window.BMapGL.Point(66.085504, 38.730909), //{name: '古佐尔', oldName: '铁门关'
            new window.BMapGL.Point(67.820816, 34.819317), //{name: '巴米扬', oldName: '梵衍那国', remark: '阿富汗之巴米扬，有被
            new window.BMapGL.Point(69.200613, 34.568583), //{name: '喀布尔', oldName: '迦毕试国', remark: '阿富汗喀布尔流域'},
            new window.BMapGL.Point(71.525011, 34.016651), //{name: '白沙瓦', oldName: '健陀罗国', remark: '巴基斯坦白沙瓦'},
            new window.BMapGL.Point(74.88679, 34.129629), // {name: '斯利那加', oldName: '迦湿弥罗国', remark: '今克什米尔印度控制区之斯利那加'},
            new window.BMapGL.Point(75.851314, 30.906216), // {name: '卢迪亚纳', oldName: '磔迦国', remark: '巴基斯坦旁遮普地区
            new window.BMapGL.Point(79.756755, 26.753289), // {name: '卡瑙杰', oldName: '曲女城', remark: '玄奘归途中在此参加了有20余国君
            new window.BMapGL.Point(85.459473, 25.12406), // {name: '那烂陀寺', oldName: '摩揭陀国的那烂陀寺', remark: '今印度比哈尔邦王舍城附近'},

          ]}
          strokeColor={styles[colors][0]}
          strokeWeight={3}
        />
        {/* 散点取经图 */}
        <div>
          <Marker style={{ color: styles[colors][0] }}
            position={position}
            icon={icon}

            autoViewport
            viewportOptions={{
              zoomFactor: -12
            }}
          />
          <Marker style={{ color: 'red ' }} //兰州
            position={new window.BMapGL.Point(103.836787, 36.078204)}
            icon={icon}

            autoViewport
            viewportOptions={{
              zoomFactor: -12
            }}
          />
          <Marker style={{ color: styles[colors][0] }}
            position={new window.BMapGL.Point(102.644554, 37.934378)} // 凉州
            icon={icon}

            autoViewport
            viewportOptions={{
              zoomFactor: -12
            }}
          />
          <Marker style={{ color: styles[colors][0] }}
            position={new window.BMapGL.Point(96.349897, 40.55498)} //唐代玉门关
            icon={icon}

            autoViewport
            viewportOptions={{
              zoomFactor: -12
            }}
          />
          <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(93.51575, 42.835347)} //伊吾
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(90.221529, 42.893574)} //白力城
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(89.202761, 42.955506)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(86.576619, 42.069454)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(75.292596, 42.924894)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(67.023766, 39.874394)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(66.085504, 38.730909)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(67.820816, 34.819317)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(69.200613, 34.568583)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(71.525011, 34.016651)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(74.88679, 34.129629)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(75.851314, 30.906216)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(79.756755, 26.753289)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />
          <Marker style={{ color: styles[colors][0] }} position={new window.BMapGL.Point(85.459473, 25.12406)}
            icon={icon} autoViewport viewportOptions={{ zoomFactor: -12 }} />

        </div>
        <div >
          {/* 文字标注 */}
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }}
            position={new window.BMapGL.Point(108.935254, 34.405189)}
            text="长安"


          />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }}
            position={new window.BMapGL.Point(103.836787, 36.078204)}
            text="兰州"
          />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(102.644554, 37.934378)} text='凉州' />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(96.349897, 40.55498)} text='唐代玉门关' />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(93.51575, 42.835347)} text='伊吾' />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(90.221529, 42.893574)} text='白力城' />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(89.202761, 42.955506)} text='高昌王城' />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(86.576619, 42.069454)} text='阿耆尼' />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(80.250095, 41.188412)} text='跋禄迦国' />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(75.292596, 42.924894)} text='碎叶' />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(67.023766, 39.874394)} text='飒秣建国' />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(66.085504, 38.730909)} text='铁门关' />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(67.820816, 34.819317)} text='梵衍那国' />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(69.200613, 34.568583)} text='迦毕试国' />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(71.525011, 34.016651)} text='健陀罗国' />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(74.88679, 34.129629)} text='迦湿弥罗国' />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(75.851314, 30.906216)} text='磔迦国' />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(79.756755, 26.753289)} text='曲女城' />
          <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][0] }} position={new window.BMapGL.Point(85.459473, 25.12406)} text='摩揭陀国的那烂陀寺' />


        </div>
      </div>
      
      {/* 东渡 */}
      <div>
        {/* 洞鉴路径 */}
        <Polyline
          path={[
            new window.BMapGL.Point(108.935254, 34.405189),//西安 长安
            new window.BMapGL.Point(111.109451, 34.726915),//陕州 陕州
            new window.BMapGL.Point(112.46661, 34.63163),//洛阳 洛阳 
            new window.BMapGL.Point(114.307256, 34.812786),//开封 汴州 119.41971,32.402383
            new window.BMapGL.Point(119.41971, 32.402383),//扬州 扬州 
            new window.BMapGL.Point(127.945404, 26.501301),//{name: '冲绳岛那霸市', oldName: '阿儿奈波岛', remark: ''},
            new window.BMapGL.Point(129.36212, 28.267847),//{name: '奄美市', oldName: '奄美大岛', remark: ''},
            new window.BMapGL.Point(130.512714, 30.344594),// {name: '屋久岛', oldName: '益救岛', remark: ''},
            new window.BMapGL.Point(130.659238, 30.996905),// {name: '佐多岬', oldName: '佐多岬', remark: ''},
            new window.BMapGL.Point(130.319912, 31.420682),//{name: '南萨摩市鹿儿岛县', oldName: '秋妻屋浦',
            new window.BMapGL.Point(129.818585, 32.821946),//{name: '长崎', oldName: '鹿濑？'
            new window.BMapGL.Point(130.463451, 33.617169),// {name: '太宰府', oldName: '太宰府', remark: ''},
            new window.BMapGL.Point(135.502182, 34.667801),//  {name: '难波', oldName: '难波', remark: ''},
            new window.BMapGL.Point(135.839829, 34.688865),//  {name: '奈良东大寺', oldName: '奈良东大寺', remark: ''},
          ]}
          strokeColor={styles[colors][1]}
          strokeWeight={3} //
        />
        {/* 字体 */}
        <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(108.935254, 34.405189)} text='长安' />
        <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(111.109451, 34.726915)} text='陕州' />
        <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(112.46661, 34.63163)} text='洛阳' />
        <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(114.307256, 34.812786)} text='洛阳' />
        <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(119.41971, 32.402383)} text='扬州' />
        <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(127.945404, 26.501301)} text='阿儿奈波岛' />
        <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(129.36212, 28.267847)} text='奄美大岛' />
        <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(130.512714, 30.344594)} text='益救岛' />
        <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(130.659238, 30.996905)} text='佐多岬' />
        <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(130.319912, 31.420682)} text='秋妻屋浦' />
        <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(129.818585, 32.821946)} text='鹿濑？' />
        <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(130.463451, 33.617169)} text='太宰府' />
        <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(135.502182, 34.667801)} text='难波' />
        <Label style={{ background: "none", border: 'none', fontSize: '.08rem', fontWeight: 'bold', color: styles[colors][1] }} position={new window.BMapGL.Point(135.839829, 34.688865)} text='奈良东大寺' />


        {/* 散点 */}
        <Marker position={new window.BMapGL.Point(135.839829, 34.688865)}
          icon={'simple_red'} autoViewport viewportOptions={{ zoomFactor: -12 }} />

        <Marker position={new window.BMapGL.Point(135.502182, 34.667801)}
          icon={'simple_red'} autoViewport viewportOptions={{ zoomFactor: -12 }} />

        <Marker position={new window.BMapGL.Point(130.463451, 33.617169)}
          icon={'simple_red'} autoViewport viewportOptions={{ zoomFactor: -12 }} />

        <Marker position={new window.BMapGL.Point(129.818585, 32.821946)}
          icon={'simple_red'} autoViewport viewportOptions={{ zoomFactor: -12 }} />

        <Marker position={new window.BMapGL.Point(130.319912, 31.420682)}
          icon={'simple_red'} autoViewport viewportOptions={{ zoomFactor: -12 }} />

        <Marker position={new window.BMapGL.Point(130.659238, 30.996905)}
          icon={'simple_red'} autoViewport viewportOptions={{ zoomFactor: -12 }} />

        <Marker position={new window.BMapGL.Point(130.512714, 30.344594)}
          icon={'simple_red'} autoViewport viewportOptions={{ zoomFactor: -12 }} />

        <Marker position={new window.BMapGL.Point(129.36212, 28.267847)}
          icon={'simple_red'} autoViewport viewportOptions={{ zoomFactor: -12 }} />

        <Marker position={new window.BMapGL.Point(127.945404, 26.501301)}
          icon={'simple_red'} autoViewport viewportOptions={{ zoomFactor: -12 }} />

        <Marker position={new window.BMapGL.Point(119.41971, 32.402383)}
          icon={'simple_red'} autoViewport viewportOptions={{ zoomFactor: -12 }} />

        <Marker position={new window.BMapGL.Point(114.307256, 34.812786)}
          icon={'simple_red'} autoViewport viewportOptions={{ zoomFactor: -12 }} />

        <Marker position={new window.BMapGL.Point(112.46661, 34.63163)}
          icon={'simple_red'} autoViewport viewportOptions={{ zoomFactor: -12 }} />

        <Marker position={new window.BMapGL.Point(111.109451, 34.726915)}
          icon={'simple_red'} autoViewport viewportOptions={{ zoomFactor: -12 }} />

        <Marker
          position={new window.BMapGL.Point(108.935254, 34.405189)}
          icon={'simple_red'}

          autoViewport
          viewportOptions={{
            zoomFactor: -12
          }}
        />

      </div>




    </Map >


  )
}


